<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>扩大可点击区域</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    /* html,
    body {
        width: 100%;
        height: 100%;
    } */

    .box{
        width: 150px;
        margin:0 auto;
        font-weight: bolder;
    }
    .box>div{
        display: flex;
        align-items: center;
        cursor: pointer;
        border: 1px solid #ccc;
        position: relative;
    }
    .box img{
        width: 50%;
    }
    /* 利用border扩大可点击区域 */
    .box>div:nth-child(1) img{
        border-right: 75px solid transparent;
    }
    .box>div:nth-child(1) span{   /*文字定位不会被border挤走 */
        position: absolute;
        right: 0;
       z-index: -1;   /* 降低文字层级是为了文字点击也有效果 */
    }
    /* 利用伪类扩大可点击区域 */
     .box>div:nth-child(2)>div{  /*img外层多加了一个div，是因为img的伪类不生效 */
        position: relative;
        width: 50%;
    }
    .box>div:nth-child(2)>div::before{
        content: "";
        position: absolute;
        right: -75px;
        left: 0;
        top: 0;
        bottom: 0;
    }
    .box>div:nth-child(2)>div img{
        width:100%;
    }
</style>

<body>
    <div class="box">
        <!-- 利用border扩大可点击区域 -->
        <div>
            <img src="./img/bg.png" alt="" onclick="clickImg()">
            <span>操作文字</span>
        </div>
        <!-- 利用伪类扩大可点击区域 -->
        <div>
            <div onclick="clickImg()">
                <img src="./img/bg.png" alt="">
            </div>
            <span>操作文字</span>
        </div>
    </div>
</body>
<script>
    var clickImg=function (){
        alert('打开图片相关')
    }
</script>
</html>